<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page layout - administrator backup</title>
    <script
      src="{{ url_for('static', filename='mobile/js/utils/rem.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/css/base.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/css/loading.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/css/app.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/css/alert.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/css/backups.css') }}"
    />
    <script
      src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </head>

  <body>
    <div class="backups">
      <div class="con">
        <div class="phone-header">
          <div class="phone-input-con">
            <input type="text" placeholder="search" class="phone-ass-input" />
            <a href="{{ url_for('auth.login') }}">
              <img
                class="signup"
                src="{{ url_for('static', filename='mobile/img/signup.svg') }}"
                alt=""
              />
            </a>
          </div>
        </div>
        <!-- <div class="header">
                <div class="h-left">
                    <span class="h-logo">logo</span>
                    <span class="h-school">xx school</span>
                </div>
                <div class="h-right">
                    <input class="h-input" type="text" placeholder="search">
                    <div class="h-center">
                        <p class="h">Hi, administrator</p>
                        <p class="h-1">welcome to xxxxxx school，keep good work</p>
                    </div>
                    <span class="h-pic">头像</span>
                </div>
            </div> -->
        <div class="ub l">
          <div class="ub_f1 l-list">
            <a href="{{ url_for('manage.professor') }}">professors</a>
          </div>
          <div class="ub_f1 l-list active">
            <a href="{{ url_for('manage.student') }}">student</a>
          </div>
          <div class="ub_f1 l-list">
            <a href="{{ url_for('manage.course') }}">course</a>
          </div>
        </div>
        <div class="cs">
          <div class="c">
            {% for student in students %}
            <div class="c-list">
              <div class="c-l">
                <p class="c-pic-c">
                  <img
                    src="{{ url_for('static', filename='mobile/img/avatar001.jpg') }}"
                    alt=""
                  />
                </p>
                <p class="c-n">{{ student.name }}</p>
                <p class="c-s">{{ student.gender.name }}</p>
              </div>
              <div class="c-r">
                <div class="c-t">
                  <div>
                    <p class="c-a">Email</p>
                    <p class="c-ns">{{ student.email }}</p>
                  </div>
                  <div>
                    <p class="c-a">phone number</p>
                    <p class="c-ns">6468-80098765</p>
                  </div>
                </div>
                <div class="student-course">
                  <p class="student-course-tirtle">course:</p>
                  <div class="student-course-con">
                    <span> course1 </span>
                    <span> course2 </span>
                    <span> course1 </span>
                    <span> course2 </span>
                    <span> course1 </span>
                    <span> course2 </span>
                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
            <div class="c-np" onclick="showAlerFn()">
              <div>
                <img
                  src="{{ url_for('static', filename='mobile/img/001.svg') }}"
                  alt=""
                />
                <p>New professor</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="alert" onclick="hideAlerFn()">
        <div class="alert-con" onclick="showAlerFn(this,event)">
          <div class="alert-con-top">
            <span class="alert-top-text"> add students </span>
            <span class="alert-close" onclick="hideAlerFn(this,event)">
              ×
            </span>
          </div>
          <div class="alert-pic">
            <p class="alert-pic-con">
              <img
                src="{{ url_for('static', filename='img/avatar001.jpg') }}"
                alt=""
              />
            </p>
            <p>Add avatar</p>
          </div>
          <form method="post">
            <div class="alert-input-con">
              <div class="alert-input-list">
                <p class="alert-input-title">name</p>
                <input
                  id="name"
                  name="name"
                  type="text"
                  placeholder="enter your name"
                />
              </div>
              <div class="alert-input-list">
                <p class="alert-input-title">email</p>
                <input
                  id="email"
                  name="email"
                  type="text"
                  placeholder="please enter the email"
                />
              </div>
              <div class="alert-input-list">
                <p class="alert-input-title">password</p>
                <input
                  id="password"
                  name="password"
                  type="password"
                  placeholder="please enter the password"
                />
              </div>
              <div class="alert-input-list">
                <p class="alert-input-title">grade</p>
                <div class="alert-select">
                  <p class="alert-select-title" onclick="showSelectFn()">
                    <span class="grade-pp">First grade</span>
                    <img
                      src="{{ url_for('static', filename='img/017.svg') }}"
                      alt=""
                    />
                  </p>
                  <div class="alert-select-lists">
                    <p class="active" onclick="selectGrade(0)">
                      <span>First grade</span>
                      <span>
                        <img
                          src="{{ url_for('static', filename='img/018.svg') }}"
                          alt=""
                        />
                      </span>
                    </p>
                    <p onclick="selectGrade(1)">
                      <span>Second grade</span>
                      <span>
                        <img
                          src="{{ url_for('static', filename='img/018.svg') }}"
                          alt=""
                        />
                      </span>
                    </p>
                    <p onclick="selectGrade(2)">
                      <span>Three grade</span>
                      <span>
                        <img
                          src="{{ url_for('static', filename='img/018.svg') }}"
                          alt=""
                        />
                      </span>
                    </p>
                    <p onclick="selectGrade(3)">
                      <span>Four grade</span>
                      <span>
                        <img
                          src="{{ url_for('static', filename='img/018.svg') }}"
                          alt=""
                        />
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <p class="alert-submit-con">
              <input class="alert-submit" type="submit" value="submit" />
            </p>
          </form>
        </div>
      </div>
    </div>
    <script>
      function selectGrade(tag) {
        const grades = [
          "First grade",
          "Second grade",
          "Three grade",
          "Four grade",
        ];
        $(".grade-pp").text(grades[tag]);
      }
      function showAlerFn(obj, event) {
        stopP(event);
        $(".alert").addClass("show");
        $(".alert-select-lists").removeClass("show");
      }

      function showSelectFn() {
        stopP(event);
        $(".alert-select-lists").addClass("show");
      }

      function stopP(e) {
        var evt = e || window.event;
        evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
      }

      function hideAlerFn() {
        stopP(event);
        $(".alert").removeClass("show");
      }
    </script>
  </body>
</html>
